<template>
  <div class="box">
    <h1>组件间通信8: provide + inject</h1>

    <h2>祖组件标题</h2>
    <p>
      content1: {{content1}} 
      <button @click="content1+= '--'">更新</button>
    </p>
    <p>
      content2.name: {{content2.name}}
      <button @click="content2={name: '+++'}">更新content2对象</button>
      &nbsp;
      <button @click="content2.name += '***'">更新content2对象内的name</button>
    </p>
    
    <Child/>
  </div>
</template>

<script>
import Child from './Child'
export default {
  name: 'ProvideInjectTest',

  data () {
    return {
      content1: 'abc',
      content2: {
        name: 'tom'
      }
    }
  },

  // 声明向后代提供数据
  provide () { // provide提供的数据本身不是响应式的
    return {
      content11: this.content1,
      content22: this.content2, // 响应式对象内部的数据依然是响应式的
      updateContent1: this.updateContent1
    }
  },

  methods: {
    updateContent1 (end) {
      this.content1 += end
    },
  },

  components: {
    Child
  }
}
</script>

<style lang="less" scoped>

</style>
